//组件--表格
Vue.component('ylTable', {
    template: `<el-table v-if="updata" :cell-style="cellStyle" :highlight-current-row="data.highlightCurrentRow" :height="height" :stripe="data.stripe" 
        @select="handleSelect" @select-all="handleSelectAll" @selection-change="handleSelectionChange"
        @cell-mouse-enter="handleCellMouseEnter" @cell-mouse-leave="handleCellMouseLeave" @cell-click="handleCellClick" 
        @cell-dblclick="handleCellDblclick" @row-click="handleRowClick" @row-contextmenu="handleRowContextmenu" 
        @row-dblclick="handleRowDblclick" @header-click="handleHeaderClick" @header-contextmenu="handleHeaderContextmenu"
        @sort-change="handleSortChange" @filter-change="handleFilterChange" @current-change="handleCurrentChange" 
        @header-dragend="handleHeaderDragend" @expand-change="handleExpandChange" 
        :size="data.size" :show-header="data.showHeader" :fit="data.fit" :border="data.border" :data="table" :style="{ width }">
        <yl-tbody v-for="(item,index) in data.thead" :config="item" :BASE_URL="data.BASE_URL">
            <template v-slot:expand="{row}">
                <slot name="expand" :row="row"></slot>
            </template>
            <template v-slot:config="{row}">
                <slot name="config" :row="row"></slot>
            </template>
            <template v-slot:custom="{data}">
                <slot name="custom" :data="data"></slot>
            </template>
        </yl-tbody>
    </el-table>`,
    mixins: [global],
    props: ['table'],
    data(){
        return {
            updata:true
        }
    },
    watch:{
        'data.thead':{
            handler(newVal) {
                let is = false
                for (let i = 0; i < newVal.length; i++) {
                    if (newVal[i]['isImage'] != newVal[i]['isImage_Old']) {
                        newVal[i]['isImage_Old'] = newVal[i]['isImage']
                        is = true;
                    }
                    if (newVal[i]['isChildren'] != newVal[i]['isChildren_Old']) {
                        newVal[i]['isChildren_Old'] = newVal[i]['isChildren']
                        is = true;
                    }
                    if (is) {
                        this.updata = false
                        this.$nextTick(() => { // 在DOM更新后  
                            this.updata = true; // 显示表格，这会触发重新渲染  
                        });
                        return;
                    }
                }
            },
            deep: true,
        }
    },
    computed: {
        cellStyle() {
            return ({ row, rowIndex }) => {
                let cellStyle = this.data.cellStyle;
                for (let i = 0; i < cellStyle.length; i++) {
                    if (cellStyle[i].type == 'row') {
                        if (cellStyle[i].unequal) {
                            if (row[cellStyle[i].prop] != cellStyle[i].condition) {
                                return cellStyle[i].structure;
                            }
                        } else {
                            if (row[cellStyle[i].prop] == cellStyle[i].condition) {
                                return cellStyle[i].structure;
                            }
                        }
                    } else if (cellStyle[i].type == 'rowIndex') {
                        if (cellStyle[i].unequal) {
                            if (rowIndex != cellStyle[i].condition) {
                                return cellStyle[i].structure;
                            }
                        } else {
                            if (rowIndex == cellStyle[i].condition) {
                                return cellStyle[i].structure;
                            }
                        }
                    }
                }
                return {}
            }
        },
    },
    methods: {
        handleSelect(selection, row) {//当用户手动勾选数据行的 Checkbox 时触发的事件
            this.$emit('select', selection, row);
        },
        handleSelectAll(selection) {//当用户手动勾选全选 Checkbox 时触发的事件
            this.$emit('select-all', selection);
        },
        handleSelectionChange(selection) {//点击选项框
            this.$emit('selection-change', selection);
        },
        handleCellMouseEnter(row, column, cell, event) {//当单元格 hover 进入时会触发该事件
            this.$emit('cell-mouse-enter', row, column, cell, event);
        },
        handleCellMouseLeave(row, column, cell, event) {//当单元格 hover 退出时会触发该事件
            this.$emit('cell-mouse-leave', row, column, cell, event);
        },
        handleCellClick(row, column, cell, event) {//当某个单元格被点击时会触发该事件
            this.$emit('cell-click', row, column, cell, event);
        },
        handleCellDblclick(row, column, cell, event) {//当某个单元格被双击击时会触发该事件
            this.$emit('cell-dblclick', row, column, cell, event);
        },
        handleRowClick(row, column, event) {//当某一行被点击时
            this.$emit('row-click', row, column, event);
        },
        handleRowContextmenu(row, column, event) {//当某一行被右键单击时
            this.$emit('row-contextmenu', row, column, event);
        },
        handleRowDblclick(row, column, event) {//当某一行被双击时会触发该事件
            this.$emit('row-dblclick', row, column, event);
        },
        handleHeaderClick(column, event) {//当某一列的表头被点击时会触发该事件
            this.$emit('header-click', column, event);
        },
        handleHeaderContextmenu(column, event) {//当某一列的表头被鼠标右键点击时触发该事件
            this.$emit('header-contextmenu', column, event);
        },
        handleSortChange({ column, prop, order }) {//当表格的排序条件发生变化的时候会触发该事件
            this.$emit('sort-change', { column, prop, order });
        },
        handleFilterChange(filters) {//当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。
            this.$emit('filter-change', filters);
        },
        handleCurrentChange(currentRow, oldCurrentRow) {//当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
            this.$emit('current-change', currentRow, oldCurrentRow);
        },
        handleHeaderDragend(newWidth, oldWidth, column, event) {//当拖动表头改变了列的宽度的时候会触发该事件
            this.$emit('header-dragend', newWidth, oldWidth, column, event);
        },
        handleExpandChange(row) {//点击展开项
            this.$emit('expand-change', row);
        },
    }
})
//组件--表格列与表格配套使用
Vue.component('ylTbody', {
    template: `<el-table-column :align="config.align" :fixed="config.fixed" :show-overflow-tooltip="config.showOverflowTooltip" 
        :prop="config.prop" :type="config.type" :label="config.label" :width="config.width">
        <template v-if="config.Children">
            <yl-tbody v-for="(item,index) in config.Children.thead" :config="item" :BASE_URL="BASE_URL"></yl-tbody>
        </template>
        <template v-if="config.type=='expand'" v-slot="{row}">
            <slot name="expand" :row="row"></slot>
        </template>
        <template v-else-if="config.image" v-slot="{row}">
            <el-image :style="{width,height}" :src="BASE_URL + row[config.prop]" :fit="config.image.fit"></el-image>
        </template>
        <template v-else-if="config.code" v-slot="{row}">
            <span>{{translation(row[config.prop],config.code)}}</span>
        </template>
        <template v-else-if="config.config" v-slot="{row}">
            <slot name="config" :row="row"></slot>
        </template>
        <template v-else-if="config.custom" v-slot="{row}">
            <slot name="custom" :data="{row,name:config.prop}"></slot>
        </template>
    </el-table-column>`,
    props: ['config', 'BASE_URL'],
    computed: {
        width() {
            return this.config.image.width + this.config.image.widthUnit
        },
        height() {
            return this.config.image.height + this.config.image.heightUnit
        },
        translation() {
            return (str, code) => {
                for (let i = 0; i < code.length; i++) {
                    if (str == code[i].condition) {
                        return code[i].structure
                    }
                }
                return this.config.default ? this.config.default : str;
            }
        },
    },
})
//组件--筛选器
Vue.component('ylScreen', {
    template: `<div :style="{borderLeft:border,borderRight:border,borderBottom:border, backgroundColor}">
    <div :style="{width}" >
        <div v-for="(arr,key) in list" :key="key" style="border-bottom: 1px dashed #c9c9c9; display: flex; flex-wrap: wrap;">
            <div :style="{color:Color(item,key),fontSize,paddingTop,paddingBottom,paddingLeft,paddingRight,height,lineHeight:height}" 
                style="cursor: pointer;" v-for="(item,i) in arr" @click="handleSelect(item,key)" :key="i">{{item.label}}</div>
        </div>
    </div></div>`,
    mixins: [global],
    data() {
        return {
            border: '1px solid #c9c9c9',
            width: '100%',
            backgroundColor: '#fff',
            fontSize: '12px',
            paddingTop: '0px',
            paddingBottom: '0px',
            paddingLeft: '10px',
            paddingRight: '10px',
            height: '50px',
            color: '#67C23A',
            list: {
                title: [{
                    label: '热门推荐',
                    value: '',
                    select: true
                }],
                category: [{
                    label: '全部',
                    value: '14',
                    select: true
                }, {
                    label: '大米',
                    value: '13',
                    select: false
                }, {
                    label: '山珍',
                    value: '12',
                    select: false
                }, {
                    label: '豆类',
                    value: '11',
                    select: false
                }, {
                    label: '生鲜果蔬',
                    value: '10',
                    select: false
                }, {
                    label: '食品酒水',
                    value: '9',
                    select: false
                }, {
                    label: '谷类',
                    value: '8',
                    select: false
                }],
                province: [{
                    label: '全部',
                    value: '7',
                    select: true
                }, {
                    label: '天津市',
                    value: '6',
                    select: false
                }, {
                    label: '河北市',
                    value: '5',
                    select: false
                }, {
                    label: '辽宁省',
                    value: '4',
                    select: false
                }, {
                    label: '吉林省',
                    value: '3',
                    select: false
                }, {
                    label: '上海市',
                    value: '2',
                    select: false
                }, {
                    label: '江苏省',
                    value: '1',
                    select: false
                }]
            },
        }
    },
    computed: {
        Color() {
            return (item, key) => {
                return item.value == this.list[key].filter(i => i.select)[0].value ? this.color : ''
            }
        },
    },
    methods: {
        handleSelect(item, key) {
            this.list[key].forEach(i => {
                i.select = false
            })
            this.list[key].filter(i => i.value == item.value)[0].select = true;
            this.$emit('Select', item, key)
        },
        getData() {

        },
        ajax(data, callback) {
            $.ajax({
                url: DomainName + '/getAddAction?token=' + $.cookie('token'),
                type: 'POST',
                data,
                success: function (res) {

                },
            })
        }
    },
})
//二次封装组件
Vue.component('glTable', {
    template: `<div :id="id" :class="[layer?'layer':'']" :style="{'border':layerBorder}">
    <yl-screen style="margin-bottom:10px;"></yl-screen>
    <yl-table :table="tableData" :data="data.table">
        <template v-slot:custom="{data:{row,name}}">
            <span v-if="name=='Total_Quantity'">{{row[name]}}{{row.Articles_Category=='预包装'?row.Unit.split('/')[1]:row.Unit}}</span>
            <span v-else-if="name=='Articles_Category'&&row[name]=='预包装'">{{row.Unit_SKU}}{{row.Unit}}</span>
        </template>
		<template v-slot:config="{row}">
			<el-button :size="'small'" :type="'success'">按钮</el-button>
		</template>
	</yl-table>
    <div style="display: flex; justify-content: end;">
        <el-pagination background v-show="total>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <i v-show="layer&&SortableSwitch" style="position: absolute;top: 0;left: 0; z-index:999; color:#67C23A;" class="el-icon-rank"></i></div>`,
    mixins: [global],
    data() {
        return {
            tableData: [{
                Picture_URL:'/ac61edd620240413190158.png',
                Article_Name:'2',
                Category_Name:'3',
                Total_Quantity:'4',
                Articles_Category:'5',
                Enterprise_Name:'9',
                Articles_Category:'预包装',
                Unit:'千克/袋',
                Unit_SKU:10
            },{
                Picture_URL:'/ac61edd620240413190158.png',
                Article_Name:'2',
                Category_Name:'3',
                Total_Quantity:'4',
                Articles_Category:'5',
                Enterprise_Name:'9',
                Articles_Category:'预包装',
                Unit:'千克/袋',
                Unit_SKU:10
            },{
                Picture_URL:'/ac61edd620240413190158.png',
                Article_Name:'2',
                Category_Name:'3',
                Total_Quantity:'4',
                Articles_Category:'5',
                Enterprise_Name:'9',
                Articles_Category:'预包装',
                Unit:'千克/袋',
                Unit_SKU:10
            },{
                Picture_URL:'/ac61edd620240413190158.png',
                Article_Name:'2',
                Category_Name:'3',
                Total_Quantity:'4',
                Articles_Category:'5',
                Enterprise_Name:'9',
                Articles_Category:'预包装',
                Unit:'千克/袋',
                Unit_SKU:10
            }],
            total: 1,
            loading: false,
            config: {
                width: 100,//长度
                widthUnit: '%',//长度单位
                height: 500,//高度
                heightUnit: 'px',//高度单位
                BASE_URL: '',//域名
                size: 'medium',//表格尺寸
                showHeader: true,//是否显示头部
                fit: true,//列宽度是否自称撑开
                border: true,//是否带有纵向边框
                stripe: true,//是否为斑马纹table
                highlightCurrentRow: false,//是否要高亮当前行
                cellStyle: [{
                    unequal: false,
                    type: 'rowIndex',
                    prop: '',
                    condition: 1,
                    structure: { color: 'red' }
                }, {
                    unequal: false,
                    type: 'row',
                    prop: 'date',
                    condition: '2016-05-04',
                    structure: { backgroundColor: 'green', color: '#fff' }

                }],
                thead: [{
                    label: "商品图片",
                    prop: "Picture_URL",
                    align: 'center',
                    fixed: false,//固定位置
                    showOverflowTooltip: false,//过长时是否
                    width: "",
                    image: {
                        width: '60',
                        widthUnit: 'px',
                        height: '60',
                        heightUnit: 'px',
                        fit: 'fill'
                    },
                }, {
                    label: "商品名称",
                    prop: "Article_Name",
                    align: 'center',
                    fixed: false,//固定位置
                    showOverflowTooltip: true,//过长时是否
                    width: "125",
                }, {
                    label: "商品类型",
                    prop: "Category_Name",
                    align: 'center',
                    fixed: false,//固定位置
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: "销售数量",
                    prop: "Total_Quantity",
                    align: 'center',
                    fixed: false,//固定位置
                    custom: true,//启用自定义插槽 
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: "包装",
                    prop: "Articles_Category",
                    align: 'center',
                    fixed: false,//固定位置
                    custom: true,//启用自定义插槽 
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: "货源地",
                    prop: "Total_Quantity",
                    align: 'center',
                    fixed: false,//固定位置
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: "所属企业",
                    prop: "Enterprise_Name",
                    align: 'center',
                    fixed: false,//固定位置
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: "发布人",
                    prop: "Enterprise_Name",
                    align: 'center',
                    fixed: false,//固定位置
                    custom: true,//启用自定义插槽 
                    showOverflowTooltip: true,//过长时是否
                    width: "",
                }, {
                    label: '操作',
                    width: '',
                    align: 'left',
                    config: true
                }],

            },
        }
    },
    computed: {
        form() {//查询传参
            return {
                page: 1,
                limit: this.data.limit
            }
        },
        screen() {//筛选器
            return []
        },
        tableform() {//表格列
            return []
        },
        config() {//参数配置项
            return []
        }
    },
    mounted() {
        this.getList(this.form, this.url);
    },
    methods: {
        getList(form, url) {
            const _this = this
            if (url) {
                $.ajax({
                    type: 'POST',
                    url,
                    data,
                    complete: function (XMLHttpRequest) {
                        _this.loading = false
                        if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                            // window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                        }
                    },
                    success: function (Result) {
                        if (Result.Status == 'success') {
                            _this.tableData = Result.tableData
                            _this.total = parseInt(Result.limit)
                        }
                    },
                    dataType: "json"
                });
            }
        },
        handleSizeChange(val) {//选择查询条数
            this.form.page = 1;
            this.form.limit = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {//选择第几页
            this.form.page = val;
            this.getList(this.form)
        },
    }
})
//表格表头配置组件
Vue.component('theadConfig', {
    template: `<div>
    <div class="table_titel">
        <div class="titel">表格属性</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="AddThead">添加</el-button>
            <el-button type="danger" size="small" @click="RemoveThead">删除</el-button>
        </div>
    </div>
    <el-descriptions style="margin-bottom:5px" :column="2" v-for="(item,index) in thead" :key="index" border size="small">
        <el-descriptions-item label="列头名称">
            <el-input v-model="item.label" placeholder="列头名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="是否嵌套">
            <el-switch @change="changeNesting(item)" v-model="item.isChildren" ></el-switch>
        </el-descriptions-item>
        <template v-if="!item.isChildren">
            <el-descriptions-item label="键名">
                <el-input v-model="item.prop" placeholder="键名"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="对齐方式">
                <el-select v-model="item.align" placeholder="请选择对齐方式">
                    <el-option v-for="(item,index) in align" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="固定位置">
                <el-select v-model="item.fixed" placeholder="请选择对齐方式">
                    <el-option label="暂不固定" :value="false"></el-option>
                    <el-option v-for="(item,index) in align" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="过长是否缩进">
                <el-switch v-model="item.showOverflowTooltip"></el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="单元格指定长度">
                <el-input @input="checkWidth($event,item)" v-model.trim="item.width" :min="0"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="是否为图片列">
                <el-switch @change="handleImage(item)" v-model="item.isImage"></el-switch>
            </el-descriptions-item>
            <template v-if="item.isImage">
                <el-descriptions-item label="图片渲染方式">
                    <el-select v-model="item.image.fit" placeholder="请选择图片渲染方式">
                        <el-option v-for="(item,index) in fit" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="长度">
                    <el-input v-model="item.image.width" placeholder="长度"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="长度单位">
                    <el-select v-model="item.image.widthUnit" placeholder="请选择长度单位">
                        <el-option v-for="(item,index) in unit" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="高度">
                    <el-input v-model="item.image.height" placeholder="高度"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="高度单位">
                    <el-select v-model="item.image.heightUnit" placeholder="请选择高度单位">
                        <el-option v-for="(item,index) in unit" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-descriptions-item>
            </template>
        </template>
        <template v-else>
            <el-descriptions-item label="嵌套表头">
                <thead-config :thead="item.Children.thead"></thead-config>
            </el-descriptions-item>
        </template>
    </el-descriptions></div>`,
    props: ['thead'],
    mixins: [globalConfig],
    data() {
        return {
            align: [{
                label: 'left',
                value: '居左'
            }, {
                label: 'center',
                value: '居中'
            }, {
                label: 'right',
                value: '居右'
            }]
        }
    },
    methods: {
        changeNesting(item) {//配置
            if (item.isChildren) {
                this.$set(item,'Children',{
                    thead: [{
                        label: '',
                        prop: '',
                        align: 'left',
                        isChildren: false,//是否二级标签
                        isChildren_Old:false,//用于比较
                        fixed: false,//固定位置
                        custom: false,//自定义插槽
                        config: false,//操作栏
                        showOverflowTooltip: false,//过长时是否
                        width: '',
                        isImage:false,
                        isImage_Old:false,//用于比较
                    }]
                })
            } else {
                delete item['Children']
            }
        },
        handleImage(item) {
            if (item.isImage) {
                this.$set(item,'image',{
                    width: 100,
                    widthUnit: '%',
                    height: 100,
                    heightUnit: '%',
                    fit: 'fill'
                })
            }else{
                delete item['image']
            }
        },
        checkWidth(e,item){//检验宽度
            if (!(/^\d+$/.test(e))) {
                item.width = e.replace(/\D/g, '')
            }
        },
        AddThead() {//添加表头
            this.thead.push({
                label: "",
                prop: "",
                align: 'left',
                isChildren: false,
                isChildren_Old:false,//用于比较
                fixed: false,//固定位置
                custom: false,//自定义插槽
                config: false,//操作栏
                showOverflowTooltip: false,//过长时是否
                width: "",
                isImage:false,
                isImage_Old:false,
            })
        },
        RemoveThead() {//删除表头
            if (this.thead.length > 1) {
                this.thead.pop();
            } else {
                this.$message({
                    message: '不能再删除了',
                    type: 'warning'
                });
            }
        },
    }
})
//表格配置组件
Vue.component('glTableConfig', {
    template: `<el-collapse :id="'config'+id">
    <el-collapse-item :name="id">
    <template slot="title">
        <div class="table_titel">
            <div class="titel">组合表格组件</div>
        </div>
    </template>
    <div class="table_titel">
        <div class="titel">筛选器属性</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="高度">
            <el-input-number v-model="data.screen.height" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-input-number v-model="data.screen.heightUnit" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="是否有斑马纹">
            <el-switch v-model="data.screen.stripe"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="尺寸">
            <el-select filterable v-model="data.screen.size" placeholder="请选择尺寸">
                <el-option v-for="(item,index) in size" :key="item.value" :label="item.label":value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="列的宽度是否自称开">
            <el-switch v-model="data.screen.fit"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否带有纵向边框">
            <el-switch v-model="data.screen.border"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否显示表头">
            <el-switch v-model="data.screen.showHeader"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否高亮当前行">
            <el-switch v-model="data.screen.highlightCurrentRow"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="每页查询条数">
            <el-input-number v-else v-model="data.screen.limit" :min="0"></el-input-number>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">表格属性</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="表格宽度">
            <el-input-number v-model="data.table.width" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="宽度单位">
            <el-select v-model="data.table.widthUnit" placeholder="请选择宽度单位">
                <el-option v-for="(item,index) in unit" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="表格高度">
            <el-input-number v-model="data.table.height" :min="0"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="高度单位">
            <el-select v-model="data.table.heightUnit" placeholder="请选择高度单位">
                <el-option v-for="(item,index) in unit" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="尺寸">
            <el-select v-model="data.table.size" placeholder="请选择尺寸">
                <el-option v-for="(item,index) in size" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="域名">
            <el-input v-model="data.table.BASE_URL" placeholder="请输入内容"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="是否显示头部">
            <el-switch v-model="data.table.showHeader"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="列宽度是否自称撑开">
            <el-switch v-model="data.table.fit"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否带有纵向边框">
            <el-switch v-model="data.table.border"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否带有斑马纹">
            <el-switch v-model="data.table.stripe"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="是否要高亮当前行">
            <el-switch v-model="data.table.highlightCurrentRow"></el-switch>
        </el-descriptions-item>
    </el-descriptions>
    <div class="table_titel">
        <div class="titel">表格条件样式(测试版)</div>
        <div class="operation">
            <el-button type="primary" size="small" @click="AddCellStyle">添加</el-button>
            <el-button type="danger" size="small" @click="RemoveCellStyle">删除</el-button>
        </div>
    </div>
    <el-descriptions style="margin-bottom:5px" :column="2" v-for="(item,index) in data.table.cellStyle" :key="index" border size="small">
        <el-descriptions-item label="判断类型">
            <el-select @change="changeCellStyleType(index)"  style="width:100%" v-model="item.type" placeholder="请选择判断类型">
                <el-option v-for="id in cellStyleType" :key="id" :label="id" :value="id"></el-option>
            </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="自定义样式">
            <el-input v-model="item.structure" placeholder="请输入内容"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="比较参数">
            <el-input v-model="item.condition" placeholder="请输入比较参数"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="等于or不等于">
            <el-switch v-model="item.unequal"></el-switch>
        </el-descriptions-item>
        <el-descriptions-item v-if="item.type=='row'" label="指定键名">
            <el-input v-model="item.prop" placeholder="请输入键名"></el-input>
        </el-descriptions-item>
    </el-descriptions>
    <thead-config :thead="data.table.thead"></thead-config>
    <div class="table_titel">
        <div class="titel">分页器属性</div>
    </div>
    <el-descriptions :column="2" border size="small">
        <el-descriptions-item label="所在位置">
            <el-input v-model="data.pagination.justifyContent" placeholder="请输入内容"></el-input>
        </el-descriptions-item>
    </el-descriptions>
    </el-collapse-item></el-collapse>`,
    mixins: [globalConfig],
    data() {
        return {
            cellStyleType: ['rowIndex', 'row'],


        }
    },
    methods: {
        AddCellStyle() {
            this.data.table.cellStyle.push({

            })
        },
        RemoveCellStyle() {

        },
        changeNesting(item) {
            if (item.isChildren) {
                item['Children'] = { thead: [] }
            } else {
                delete item['Children']
            }
            console.log(item);
        },
        AddThead() {//添加表头

        },
        RemoveThead() {//删除表头

        },
        changeCellStyleType(index) {//改变判断类型时添加
            this.data.table.cellStyle[index].prop = ''
        },

    }
})